﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyGoods.aspx.cs" Inherits="Inventory.view.MyGoods" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>查询商品信息</title>
    <link href="../Content/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../Content/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../Content/js/layer/layer.min.js"></script>
    <style type="text/css">
        .button {
            display: inline-block;
            zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
            *display: inline;
            vertical-align: baseline;
            margin: 0 2px;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0,0,0,.3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }

            .button:hover {
                text-decoration: none;
            }

            .button:active {
                position: relative;
                top: 1px;
            }
        /* white */
        .white {
            color: #606060;
            border: solid 1px #b7b7b7;
            background: #fff;
            background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
            background: -moz-linear-gradient(top, #fff, #ededed);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
        }

            .white:hover {
                background: #ededed;
                background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
                background: -moz-linear-gradient(top, #fff, #dcdcdc);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
            }

            .white:active {
                color: #999;
                background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
                background: -moz-linear-gradient(top, #ededed, #fff);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
            }

        table {
            width: 880px;
            padding: 0;
            margin: 0;
            table-layout: fixed;
        }

        th {
            font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: center;
            padding: 6px 6px 6px 12px;
            background: #CAE8EA no-repeat;
        }

        td {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            background: #fff;
            font-size: 12px;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
            text-align: left;
            overflow: hidden;
        }

            td .goodsName {
                word-break: break-all;
            }

            td .no {
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            td .goodsUrl {
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .imgedit {
            cursor: pointer;
            float:right;
            margin-right:10px;
        }

        #divGoodsDtl {
            position: relative;
            z-index: 9999;
            background-color: white;
            padding: 0 5px 5px 5px;
            display: none;
        }

        #showinnum {
            position: relative;
            z-index: 9999;
            background-color: white;
            padding: 0 5px 5px 5px;
            display: none;
        }

            #showinnum .num {
                text-align:center;
                margin:5px 0;
            }

            #divGoodsDtl #tooltip {
                position: absolute;
                z-index: 99999;
                float: left;
            }

            #divGoodsDtl .dtl {
                height: 350px;
                overflow-y: scroll;
            }

            #divGoodsDtl li {
                list-style-type: none;
                border-bottom: 1px dashed #000;
                padding: 5px 0 5px 0;
                width: 450px;
            }

                #divGoodsDtl li span {
                    width: 160px;
                    display: inline-block;
                    padding: 0px 10px 0px 10px;
                }
            #divGoodsDtl .bottom {
                width: 100%;
                text-align: center;
                background-color: rgba(0,0,0,.2);
                height:10px;
            }
    </style>
    <script type="text/javascript">
        var optionStr = "";

        function PicMouseOver(obj) {
            var tooltip = "<div id='tooltip'><img src='" + obj.src + "' alt='预览图' width='300' height='300'/></div>"; //创建 div 元素
            $("#divGoodsDtl").append(tooltip);  //把它追加到文档中                      
            $("#tooltip")
            .css({
                "top": ($(obj).position().top + 30) + "px",
                "left": ($(obj).position().left + 30) + "px"
            }).show("fast");      //设置x坐标和y坐标，并且显示
        }
        function PicMouseOut(obj) {
            this.title = this.myTitle;
            $("#tooltip").remove();  //移除
        }
        //是否发送弹窗消息
        var Sobj, Sid, SisNeedShow;
        function ShowInfo(obj, id, isNeedShow) {
            if (isNeedShow == "0") {
                SisNeedShow = isNeedShow;
                $.ajax({
                    type: "POST",
                    url: "MyGoods.aspx",
                    data: "action=showinfo&isneedshow=" + isNeedShow + "&id=" + id,
                    success: function (msg) {
                        if (SisNeedShow == "0") {
                            $(obj).attr("src", "../Content/image/no.gif");
                        } else {
                            $(obj).attr("src", "../Content/image/yes.gif");
                        }
                        $(obj).attr("onclick", "ShowInfo(this," + id + ",1)");
                        layer.alert('操作成功！', 1);
                    }
                });
            } else {
                Sobj = obj;
                Sid = id;
                SisNeedShow = isNeedShow;
                divDtl = $.layer({
                    type: 1,
                    title: false,
                    border: [5, 0.5, '#666', true],
                    offset: ['80px', ''],
                    shade: [0, '#000', true],
                    //move: ['#div1', false],
                    area: ['180px', 'auto'],
                    title: '弹窗提示信息',
                    zIndex: 23,
                    page: {
                        dom: '#showinnum'
                    }
                });
            }
        }

        //显示明细
        function ShowDtl(obj, goodsId) {
            if ($(obj).attr("hadGetDtl") == "false") {
                $.getJSON("MyGoods.aspx?action=getDtl&goodsId=" + goodsId + "", function (json) {
                    var liStr = "";
                    $(json).each(function (index, value) {
                        if (value.ColorPicSrc != "") {
                            liStr += "<li goodsid=\"" + goodsId + "\" dtlid=\"" + value.Id + "\"><img onmouseover='PicMouseOver(this)' onmouseout='PicMouseOut(this)' src=\"" + value.ColorPicSrc + "\" width='32' height='32' /><span>颜色：" + value.Color + "</span><span>尺寸：" + value.Size + "</span>数量:" + value.Cnt + "</li>";
                        } else {
                            liStr += "<li goodsid=\"" + goodsId + "\" dtlid=\"" + value.Id + "\"><span>颜色：" + value.Color + "</span><span>尺寸：" + value.Size + "</span>数量:" + value.Cnt + "</li>";
                        }

                    });
                    $("#divGoodsDtl ul").append(liStr);
                    $(obj).attr("hadGetDtl", "true");
                });
            } else {
                $("li[goodsid='" + goodsId + "']").show();
            }
            divDtl = $.layer({
                type: 1,
                title: false,
                border: [5, 0.5, '#666', true],
                offset: ['80px', ''],
                shade: [0, '#000', true],
                //move: ['#div1', false],
                area: ['490px', 'auto'],
                title: '详细信息',
                zIndex: 23,
                page: {
                    dom: '#divGoodsDtl'
                },
                close: function () {
                    layer.close(divDtl);
                    $("li[goodsid='" + goodsId + "']").hide();
                }
            });
        }

        $(function () {
            //获取列表数据
            $.getJSON("MyGoods.aspx?action=getList", function (json) {
                var str = "";
                $(json).each(function (index, value) {
                    str += "<tr isedit=\"false\" value=\"" + value.GoodsId + "\">";
                    str += "<td fieldname=\"id\" value=\"" + value.Id + "\" style='text-align:center'><input name='sel' type=\"checkbox\" value=\"" + value.Id + "\" /></td>";
                    str += "<td fieldname=\"shopname\" value=\"" + value.SellerInfo.ShopName + "\"><a href='" + value.SellerInfo.ShopUrl + "' target='_blank'>" + value.SellerInfo.ShopName + "</a><br/><a target=\"_blank\" href=\"http://www.taobao.com/webww/ww.php?ver=3&touid=" + encodeURI(value.SellerInfo.Aliww) + "&siteid=cntaobao&status=1&charset=utf-8\"><img border=\"0\" src=\"http://amos.alicdn.com/realonline.aw?v=2&uid=" + encodeURI(value.SellerInfo.Aliww) + "&site=cntaobao&s=1&charset=utf-8\" alt=\"点这里给我发消息\" /></a></td>";
                    str += "<td fieldname=\"goodsId\" value=\"" + value.GoodsId + "\" style='display:none'>" + value.GoodsId + "</td>";
                    str += "<td fieldname=\"classId\" value=\"" + value.GoodsInfo.ClassId + "\">" + value.GoodsInfo.ClassName + "</td>";
                    str += "<td><img src='" + value.GoodsInfo.PicSrc + "' width='60' height='60' /></td>";
                    str += "<td class=\"goodsName\" fieldname=\"goodsName\" value=\"" + value.GoodsInfo.GoodsName + "\"><a href='" + value.GoodsInfo.GoodsUrl + "' target='_blank'>" + value.GoodsInfo.GoodsName + "</a></td>";
                    str += "<td class=\"no\" fieldname=\"no\" value=\"" + value.GoodsInfo.No + "\">" + value.GoodsInfo.No + "</td>";
                    if (value.GoodsInfo.LeftNum > 0) {
                        str += "<td fieldname=\"leftNum\" value=\"" + value.GoodsInfo.LeftNum + "\">" + value.GoodsInfo.LeftNum + "<img class='imgedit' hadGetDtl='false' onclick='ShowDtl(this,\"" + value.GoodsId + "\")' src='../Content/image/detail.gif' title='显示明细' width='15' height='15' /></td>";
                    } else {
                        str += "<td fieldname=\"leftNum\" value=\"" + value.GoodsInfo.LeftNum + "\">" + value.GoodsInfo.LeftNum + "</td>";
                    }
                    if (value.IsNeedShow) {
                        str += "<td fieldname=\"isNeedShow\" value=\"true\" style='text-align:center'><img style='cursor:pointer' onclick='ShowInfo(this," + value.Id + ",0)' src='../Content/image/yes.gif' title='发送弹窗消息' alt='发送弹窗消息' /></td>";
                    } else {
                        str += "<td fieldname=\"isNeedShow\" value=\"false\" style='text-align:center'><img style='cursor:pointer' onclick='ShowInfo(this," + value.Id + ",1)' src='../Content/image/no.gif' title='不发送弹窗消息' alt='不发送弹窗消息' /></td>";
                    }
                    str += "<td fieldname=\"lastUpdateTime\" value=\"" + value.GoodsInfo.LastUpdateTime + "\">" + value.GoodsInfo.LastUpdateTime + "</td>";
                    str += "<td fieldname=\"note\" value=\"" + value.GoodsInfo.Note + "\">" + value.GoodsInfo.Note + "</td>";
                    str += "</tr>";
                });
                $("#tbodylist tbody").append(str);
            });
            //搜索
            $("#search").click(function () {
                $("#tbodylist tbody").html("");
                //获取列表数据
                $.getJSON("MyGoods.aspx?action=getList&aliww=" + $("#aliww").val() + "&classId=" + $("#cx_class").val() + "&goodsName=" + $.trim($("#cx_goodsname").val()) + "&no=" + $.trim($("#cx_no").val()) + "", function (json) {
                    var str = "";
                    $(json).each(function (index, value) {
                        str += "<tr isedit=\"false\" value=\"" + value.GoodsId + "\">";
                        str += "<td fieldname=\"id\" value=\"" + value.Id + "\" style='text-align:center'><input name='sel' type=\"checkbox\" value=\"" + value.Id + "\" /></td>";
                        str += "<td fieldname=\"shopname\" value=\"" + value.SellerInfo.ShopName + "\"><a href='" + value.SellerInfo.ShopUrl + "' target='_blank'>" + value.SellerInfo.ShopName + "</a><br/><a target=\"_blank\" href=\"http://www.taobao.com/webww/ww.php?ver=3&touid=" + encodeURI(value.SellerInfo.Aliww) + "&siteid=cntaobao&status=1&charset=utf-8\"><img border=\"0\" src=\"http://amos.alicdn.com/realonline.aw?v=2&uid=" + encodeURI(value.SellerInfo.Aliww) + "&site=cntaobao&s=1&charset=utf-8\" alt=\"点这里给我发消息\" /></a></td>";
                        str += "<td fieldname=\"goodsId\" value=\"" + value.GoodsId + "\" style='display:none'>" + value.GoodsId + "</td>";
                        str += "<td fieldname=\"classId\" value=\"" + value.GoodsInfo.ClassId + "\">" + value.GoodsInfo.ClassName + "</td>";
                        str += "<td><img src='" + value.GoodsInfo.PicSrc + "' width='60' height='60' /></td>";
                        str += "<td class=\"goodsName\" fieldname=\"goodsName\" value=\"" + value.GoodsInfo.GoodsName + "\"><a href='" + value.GoodsInfo.GoodsUrl + "' target='_blank'>" + value.GoodsInfo.GoodsName + "</a></td>";
                        str += "<td class=\"no\" fieldname=\"no\" value=\"" + value.GoodsInfo.No + "\">" + value.GoodsInfo.No + "</td>";
                        if (value.GoodsInfo.LeftNum > 0) {
                            str += "<td fieldname=\"leftNum\" value=\"" + value.GoodsInfo.LeftNum + "\">" + value.GoodsInfo.LeftNum + "<img class='imgedit' hadGetDtl='false' onclick='ShowDtl(this,\"" + value.GoodsId + "\")' src='../Content/image/detail.gif' title='显示明细' width='15' height='15' /></td>";
                        } else {
                            str += "<td fieldname=\"leftNum\" value=\"" + value.GoodsInfo.LeftNum + "\">" + value.GoodsInfo.LeftNum + "</td>";
                        }
                        if (value.IsNeedShow) {
                            str += "<td fieldname=\"isNeedShow\" value=\"true\" style='text-align:center'><img style='cursor:pointer' onclick='ShowInfo(this," + value.Id + ",0)' src='../Content/image/yes.gif' title='发送弹窗消息' alt='发送弹窗消息' /></td>";
                        } else {
                            str += "<td fieldname=\"isNeedShow\" value=\"false\" style='text-align:center'><img style='cursor:pointer' onclick='ShowInfo(this," + value.Id + ",1)' src='../Content/image/no.gif' title='不发送弹窗消息' alt='不发送弹窗消息' /></td>";
                        }
                        str += "<td fieldname=\"lastUpdateTime\" value=\"" + value.GoodsInfo.LastUpdateTime + "\">" + value.GoodsInfo.LastUpdateTime + "</td>";
                        str += "<td fieldname=\"note\" value=\"" + value.GoodsInfo.Note + "\">" + value.GoodsInfo.Note + "</td>";
                        str += "</tr>";
                    });
                    $("#tbodylist tbody").append(str);
                });
            });

            //获得分类
            $.getJSON("MyGoods.aspx?action=getClass", function (json) {
                optionStr += "<option value='0'>请选择</option>";
                $(json).each(function (index, value) {
                    if (value.ParentId > 0) {
                        optionStr += "<option value='" + value.Id + "'>|-" + value.ClassName + "</option>";
                    } else {
                        optionStr += "<option value='" + value.Id + "'>" + value.ClassName + "</option>";
                    }
                });
                $("#cx_class").append(optionStr);
            });

            $("#confirmShow").click(function () {
                $.ajax({
                    type: "POST",
                    url: "MyGoods.aspx",
                    data: "action=showinfo&lessnum=" + $("#lessnum").val() + "&isneedshow=" + SisNeedShow + "&id=" + Sid,
                    success: function (msg) {
                        if (SisNeedShow == "0") {
                            $(Sobj).attr("src", "../Content/image/no.gif");
                        } else {
                            $(Sobj).attr("src", "../Content/image/yes.gif");
                        }
                        $(Sobj).attr("onclick", "ShowInfo(this," + Sid + ",0)");
                        layer.alert('操作成功！', 1);
                        layer.close(divDtl);
                    }
                });
            });

            $("#closeShow").click(function () {
                layer.close(divDtl);
            });

            //只能输入数字
            $("#lessnum").keyup(function () {  //keyup事件处理 
                $(this).val($(this).val().replace(/\D|^0/g, ''));
            }).bind("paste", function () {  //CTR+V事件处理 
                $(this).val($(this).val().replace(/\D|^0/g, ''));
            }).css("ime-mode", "disabled");  //CSS设置输入法不可用
        });
    </script>
</head>
<body>
    <div style="text-align: center">
        <div style="width: 880px; text-align: left; margin: auto">
            <div style="margin-bottom: 10px;">
                <span style="margin-bottom: 0; margin-left: 10px;">档口旺旺:</span>
                <input type="text" id="aliww" style="margin-bottom: 0; width: 80px;" />
                <span style="margin-bottom: 0; margin-left: 20px;">分类:</span>
                <select style="margin-bottom: 0; width: 130px;" id="cx_class">
                </select>
                <span style="margin-bottom: 0; margin-left: 10px;">商品名称:</span>
                <input type="text" id="cx_goodsname" style="margin-bottom: 0; width: 80px;" />
                <span style="margin-bottom: 0; margin-left: 10px;">货号:</span>
                <input type="text" id="cx_no" style="margin-bottom: 0; width: 80px;" />
                <button id="search">&nbsp;搜索&nbsp;</button>
            </div>
        </div>
        <table style="width: 880px; margin: auto" class="table table-striped table-hover table-bordered" id="tbodylist">
            <thead>
                <tr>
                    <th style="width: 55px;">
                        <input type="checkbox" value="" id="selall" />
                    </th>
                    <th style="display: none"></th>
                    <th style="width: 100px;">档口
                    </th>
                    <th style="width: 80px;">分类
                    </th>
                    <th style="width: 65px;">缩略图
                    </th>
                    <th style="width: 150px;">商品名称
                    </th>
                    <th style="width: 50px;">货号
                    </th>
                    <th style="width: 90px;">剩余数量
                    </th>
                    <th style="width: 50px;">弹窗
                    </th>
                    <th style="width: 80px;">更新时间
                    </th>
                    <th>备注
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divGoodsDtl">
        <div class="dtl">
            <ul>
            </ul>
        </div>
        <div class="bottom">
        </div>
    </div>
    <div id="showinnum">
        <div class="innum">
            数量少于<input type="text" id="lessnum" style="width:50px;" value="10" />显示弹窗
        </div>
        <div class="bottom num">
            <input type="button" id="confirmShow" value="确定" />
            <input type="button" id="closeShow" value="取消" />
        </div>
    </div>
</body>
</html>